<template>
  <div class="customer-input">
    <p style="color: dodgerblue">{{title}}</p>
    <div class="item-content">
      <!--<input type="text" ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)" />
      
      <p style="float: left;
    margin-left: .5rem;">{{limit-value.length}}</p>-->
      <x-textarea :max="Number(limit)"  v-model="value" placeholder="" :show-counter="true" :rows="1" ref="autosize"></x-textarea>
    </div>

  </div>
</template>
<script>
    import XTextarea from 'vux/src/components/x-textarea'
    // import {
    //     XTextarea
    // } from 'vux'
    import Autosize from 'autosize'
    export default {
        components: {
            XTextarea
        },

        watch: {
            value: function(newValue, oldValue) {
                let s = this.stripscript(newValue);
                if (s !== newValue) {
                    this.value = s;
                }
                this.$emit('input', String(this.value));
            }

        },
        mounted() {
            Autosize(this.$refs.autosize.$refs.textarea)
        },
        beforeDestroy() {
            Autosize.destroy(this.$refs.autosize.$refs.textarea)
        },
        props: ['limit', 'title'],
        data() {
            return {
                textLength: 0,
                value: ''
            }
        },
        computed: {
            getLimitLength: function() {
                return this.value;
            }
        },
        methods: {
            updateValue: function(value) {

                let formattedValue = this.stripscript(value);
                if (formattedValue.length > this.limit) {
                    formattedValue = formattedValue.substr(0, this.limit);
                }
                if (formattedValue !== value) {
                    this.$refs.input.value = formattedValue;
                }
                this.textLength = formattedValue.length;
                this.$emit('input', String(formattedValue));
                this.value = formattedValue;

            },
            stripscript: function(s) {
                return s.replace(/<[^<>]+>/g, "");
            }
        }
    }
</script>
<style>
    .weui-textarea {
        float: left;
        width: 80%;
    }
    
    .weui-textarea-counter {
        color: #B2B2B2;
        text-align: right;
        float: right;
        line-height: 32px;
        font-size: .8rem;
    }
</style>
<style scoped>
    .customer-input {
        overflow: hidden;
        width: 100%;
        margin-top: .6rem;
        padding: .6rem 1rem;
        background: white;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    
    .customer-input p {
        color: #999;
        font-size: .8rem;
    }
    
    .customer-input input {
        float: left;
        border: none;
        height: 1.5rem;
    }
    
    .customer-input item-content {
        width: 100%;
    }
    
    .customer-input input {
        width: 90%;
    }
</style>